<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/resources/template/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        <h:form>
            <p:panel header="Manage Products"  >
                <h:panelGrid columns="2" style="min-width: 100%;"  styleClass="alignTop" >
                    <p:panel header="List" >
                        <h:inputText autocomplete="off"  value="#{vmpController.selectText}" >
                            <f:ajax execute="@this" render="lstSelect" event="keyup" />
                        </h:inputText>
                        <p:selectOneListbox style="height: 300px;min-width: 200px;" id="lstSelect" value="#{vmpController.current}">
                            <f:selectItems value="#{vmpController.selectedItems}" itemLabel="#{v.name}" var="v" itemValue="#{v}"/>
                            <f:ajax render="gpDetail" execute="lstSelect viv" >
                            </f:ajax>
                        </p:selectOneListbox>
                        <h:panelGrid id="gpSelectButtons" columns="3"  >
                            <p:commandButton id="btnAdd" value="Add" ajax="false" action="#{vmpController.prepareAdd()}" styleClass="buttons" >
                                <p:ajax update="btnAdd  btnDelete gpDetail " process="btnAdd" >
                                </p:ajax>
                            </p:commandButton>
                            <p:commandButton id="btnDelete" ajax="false" onclick="if (!confirm('Are you sure you want to delete this record?'))
                                        return false;" action="#{vmpController.delete()}"  value="Delete"  >
                            </p:commandButton>
                        </h:panelGrid>
                    </p:panel>
                    <p:panel id="gpDetail" header="Details" >
                        <h:panelGrid columns="2" styleClass="alignTop" >

                            <h:outputLabel value="Generic Name" style="white-space: nowrap;" ></h:outputLabel>
                            <p:autoComplete converter="vtm" value="#{vmpController.addingVtmInVmp.vtm}" 
                                            forceSelection="true"
                                            completeMethod="#{vtmController.completeVtm}" var="vt" itemLabel="#{vt.name}" itemValue="#{vt}" >
                            </p:autoComplete>
                           
                            <h:outputLabel value="Strength" >
                            </h:outputLabel>

                            <p:inputText autocomplete="off" value="#{vmpController.addingVtmInVmp.strength}" ></p:inputText>
                            
                            <h:outputLabel value="Strength Unit" >
                            </h:outputLabel>
                            <p:selectOneMenu value="#{vmpController.addingVtmInVmp.strengthUnit}">
                                <f:selectItem itemLabel="Select Strength Unit" ></f:selectItem>
                                <f:selectItems value="#{measurementUnitController.items}" var="m" itemValue="#{m}" itemLabel="#{m.name}"/>
                            </p:selectOneMenu>                          

                            <h:outputLabel value="Type" ></h:outputLabel>

                            <p:selectOneMenu value="#{vmpController.current.category}">
                                <f:selectItem itemLabel="Select Category" ></f:selectItem>
                                <f:selectItems value="#{pharmaceuticalItemTypeController.items}" var="cat" itemValue="#{cat}" itemLabel="#{cat.name}"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Name" ></h:outputLabel>
                            <p:inputText autocomplete="off" value="#{vmpController.current.name}" ></p:inputText>

                            <h:outputLabel value=""></h:outputLabel>
                            <p:commandButton value="Add" ajax="false" action="#{vmpController.addVtmInVmp()}" >
                            </p:commandButton>

                        </h:panelGrid>

                        <p:dataTable id="viv" value="#{vmpController.vivs}" var="v" >

                            <p:column headerText="VTM">
                                #{v.vtm.name}
                            </p:column>
                            <p:column headerText="Strength">
                                #{v.strength} #{v.strengthUnit.name}
                            </p:column>
                            <p:column headerText="Remove">

                                <p:commandButton value="Remove" ajax="false" action="#{vmpController.remove}">
                                    <f:setPropertyActionListener value="#{v}" target="#{vmpController.removingVtmInVmp}"/>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>

                        <p:commandButton action="#{vmpController.saveSelected()}" ajax="false" value="Save" ></p:commandButton>

                    </p:panel>

                </h:panelGrid>

            </p:panel>
        </h:form>
    </ui:define>

</ui:composition>